<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<script>
   var flag=true;
   function checkflag()
   {
       var StrInSpanb1=document.getElementById("usernameCheck").value;
       var StrInSpanb2=document.getElementById("emailCheck").value;
       var StrInSpanb3=document.getElementById("passwordCheck").value;
       var StrInSpanb4=document.getElementById("password2Check").value;
       var AddStr=StrInSpanb1+StrInSpanb2+StrInSpanb3+StrInSpanb4;
       if (isNaN(AddStr)) {
           flag=true;
       }
       else{
           flag=false;
       }
   }
function onSubmit()
{
    checkflag();
    if(flag)
    {
        var data=new Object();
        data.user=document.getElementById("username").value;
        data.password=document.getElementById("password").value;
        data.mail=document.getElementById("email").value;
        data.str=JSON.stringify(data);
        localStorage.setItem("userID"+document.getElementById("username").value,data.str);
        alert("注册成功！")
    }
    else
    {alert("注册信息有误！")}

}

function Check(str) {
    var a = document.getElementById(str);
    var b = document.getElementById(str + "Check");
    if (str === "username") {
        if (a.value === "")
        {b.innerHTML="用户名不能为空";
        }
        else {
            for (var i = 0; i < localStorage.length; i++) {
                var key = localStorage.key(i);
                var ss = localStorage.getItem(key);
                var data = JSON.parse(ss);
                if (a.value === data.user)
                {b.innerHTML = "此用户名已存在";
                }
            }
        }
        b.innerHTML="";
    }

    else if (str === "password") {
            L = a.value.length;
            if (L === 0) {
                {b.innerHTML = "密码不能为空";
                }

            } else if (L > 16) {
                {b.innerHTML = "密码长度不能大于16"; }

            } else if (L < 6) {
                {b.innerHTML = "密码长度不能小于6"; }

            }
            else {
                b.innerHTML = "";

            }
        }

    else if(str==="password2"){
        var z=document.getElementById("password").value;
        if(z!==a.value){
             b.innerHTML="两次输入的密码不一致";
        }
        else {b.innerHTML="";}
    }
    else if(str="email"){
        if(a.value==="")
        {b.innerHTML="邮箱不能为空"; }
    else {
         var zhengze = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
        isok= zhengze.test(a.value);
        if(isok)
        { b.innerHTML="";}
        else {b.innerHTML="邮箱不合法";}
    }
}


}
</script>
<body>
<div1>
    <form>
        邮箱：
        <div>
        <input type="text" name="email" id="email" onblur='Check("email")'>
        </div><br><br>
        <span id="emailCheck" class="Check"></span><br>
        用户名:
        <div>
        <input type="text" name="username" id="username" onblur='Check("username")'>
        </div><br><br>
        <span id="usernameCheck" class="Check"></span><br>
        密码：
        <div>
        <input type="password" name="password" id="password" onblur='Check("password")'>
        </div><br><br>
        <span id="passwordCheck" class="Check"></span><br>
        确认密码:
        <div>
        <input type="password" name="password2" id="password2" onblur='Check("password2")'>
        </div><br><br>
        <span id="password2Check" class="password2"></span><br>
        <input type="submit" value="注册" onclick="onSubmit()">
        <p> <a href="login.html">已有账号？点击登录</a> </p>
    </form>
</div1>
</body>


</html>